<template>
  <div class="lbox">
    <div class="txt1 YouSheBiaoTiHei">接车服务订单统计</div>
    <div ref="chart" style="width: 100%; height: 340px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { orderCountChart } from '../../api/index'
export default {
  created() {
    console.log(11111555, this.$route.query.id)
    this.id = atob(this.$route.query.id)
    this.month = 1
  },
  mounted() {
    let that = this
    this.myChart = echarts.init(this.$refs.chart)
    this.getData()
    setInterval(() => {
      that.getData()
    }, 5000)
  },
  methods: {
    getData() {
      let para = {
        id: this.id,
        startMonth: this.month,
      }
      console.log(para)
      this.month = this.month == 1 ? 7 : 1
      orderCountChart(para).then((res) => {
        let xList = []
        let yList1 = []
        let yList2 = []
        res.data.data.forEach((item) => {
          xList.push(item.month)
          yList1.push(item.userCount)
          yList2.push(item.orderCount)
          this.myChart.setOption({
            legend: {
              data: ['预约用户数', '预约订单量'],
              textStyle: {
                color: '#fff',
              },
            },
            grid: {
              containLabel: true,
              top: '10%',
              left: '6%',
              right: '6%',
              bottom: '10%',
            },
            tooltip: {
              trigger: 'axis',
            },
            xAxis: {
              type: 'category',
              data: xList,
              axisLabel: {
                color: '#fff', // 设置 x 轴标签颜色为您想要的颜色值
              },
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                color: '#fff', // 设置 x 轴标签颜色为您想要的颜色值
              },
            },
            series: [
              {
                name: '预约用户数',
                data: yList1,
                type: 'bar',
                color: '#D97513',
                label: {
                  show: true,
                  position: 'top',
                  color: '#D97513',
                },
              },
              {
                name: '预约订单量',
                data: yList2,
                type: 'bar',
                color: '#E4C477',
                label: {
                  show: true,
                  position: 'top',
                  color: '#E4C477',
                },
              },
            ],
          })
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.lbox {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.txt1 {
  color: #71d2ff;
}
</style>
